<template>
  <div class="page-container padding-20 query-list-container">
    <div v-show="$route.fullPath === $route.matched[1].path">
      <div class="search-container">
        <el-form :inline="true" ref="form" :model="searchData" size="small">
          <el-form-item label="电影名称">
            <el-input v-model="searchData.name" placeholder="请输入电影名称"></el-input>
          </el-form-item>
          <el-form-item label="放映状态">
            <el-select v-model="searchData.status" clearable>
              <el-option
                v-for="status in statusList"
                :key="status.value"
                :label="status.label"
                :value="status.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
          <el-button @click="onReset" size="small">重置</el-button>
          <!-- <el-button @click="requestData" size="small">刷新</el-button> -->
        </el-form>
      </div>
      <div class="mt-10 movie-list-container">
        <el-row>
          <el-col :span="4" v-for="movie in tableData" :key="movie.movieId">
            <div class="movie-item">
              <div class="movie-poster-wrapp">
                <el-image class="movie-poster" :src="movie.poster || tempPng" fit="fill">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              <h5 class="movie-name text-ellipsis-1" :title="movie.movieName">{{movie.movieName}}</h5>
              <h6 class="movie-status">{{MOVIE_STATUS[movie.status]}}</h6>
              <div class="flex justify-between">
                <el-button size="small" @click="linkToDetail(movie)">查看</el-button>
                <el-button size="small" @click="linkToEdit(movie)">编辑</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size="pageOption.pageSize"
        :page-sizes="pageOption.pageSizes"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span
          class="pagination-title"
        >共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
      </el-pagination>
    </div>
    <router-view v-if="$route.fullPath !== $route.matched[1].path" @refresh="requestData"></router-view>
  </div>
</template>

<script>
import { movie } from "@/api/viewing";
import tempPng from "@/assets/images/noimg.png";
import { MOVIE_STATUS } from "@/utils/const";

export default {
  name: "MovieMgt",
  components: {},
  data() {
    this.MOVIE_STATUS = MOVIE_STATUS;

    return {
      tempPng,
      statusList: Object.keys(MOVIE_STATUS).map(key => {
        return {
          value: key,
          label: MOVIE_STATUS[key]
        };
      }),
      searchData: {
        name: "",
        status: ""
      },
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 12,
        total: 0,
        pageTotal: 1,
        pageSizes: [12, 24, 36, 48, 60]
      },
      visible: false
    };
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.searchData.name = "";
      this.searchData.status = "";
      this.requestData();
    },
    linkToDetail({ movieId }) {
      this.$router.push({ name: "movieDetail", params: { movieId } });
    },
    linkToEdit({ movieId }) {
      this.$router.push({ name: "movieEdit", params: { movieId } });
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption;
      const postData = {},
        searchData = this.searchData;
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          postData[key] = this.searchData[key];
        }
      });
      const { data, total } = await movie({
        page: page - 1,
        size,
        ...postData
      });
      this.tableData = data;
      this.pageOption.total = total;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      let childrenRefs = this.$refs.pagination.$children;
      this.$nextTick(() => {
        childrenRefs.forEach(child => child.$forceUpdate());
      });
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    }
  },
  created() {
    this.requestData();
  }
};
</script>

<style lang="scss" scope>
.movie-list-container {
  padding: 20px;
  border: 1px solid #cccccc;
}

.movie-item {
  width: 80%;
  margin: 20px auto;
  text-align: center;
  color: #333;

  .movie-poster-wrapp {
    position: relative;
    padding-top: 130%;

    .movie-poster {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .movie-name {
    margin: 10px 0;
    font-size: 18px;
    font-weight: normal;
  }

  .movie-status {
    margin: 10px 0;
    font-size: 14px;
    color: #666666;
    font-weight: normal;
  }
}
</style>